<template>
	<view  class="page">
		<view style="display: flex;flex-direction: row;justify-content: space-between;background: #FFFFFF;">
			
			
			<view style="display: flex;flex-direction: column;align-items: center;margin-left: 60upx;"
				@click="switchTab(1)">
				<view style="font-size: 28upx;color: #191919;font-weight: bold;">
					待下单
				</view>
				<image v-if="code===1" style="width: 48upx;height: 16upx;" src="../../static/images/publish-scoll.png"
					mode=""></image>
			</view>
		    <view style="display: flex;flex-direction: column;align-items: center;background: #FFFFFF;" @click="switchTab(2)">
				<view style="font-size: 28upx;color: #191919;font-weight: bold;">
					已下单
				</view>
				<image v-if="code===2" style="width: 48upx;height: 16upx;" 
				src="../../static/images/publish-scoll.png" mode=""></image>
			</view>
			
			<view style="margin-right: 60upx;display: flex;flex-direction: column;align-items: center;"
			 @click="switchTab(4)">
				<view style="font-size: 28upx;color: #191919;font-weight: bold;">
					已完成
				</view>
				<image v-if="code===4" style="width: 48upx;height: 16upx;"
				 src="../../static/images/publish-scoll.png" mode=""></image>
			</view>
		</view>
		
		
		<view style="background: #FFFFFF;border-radius: 20upx;width: 702upx;height: 254upx;
		margin-top: 24upx;margin-left: 24upx;margin-right: 24upx;" v-for="(item,index) in demandOrderList" :key="index" v-if="code===1">
			<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
				<view style="display: flex;flex-direction: row;align-items: center;margin-top: 24upx;margin-left: 24upx;">
					<image style="width: 48upx;height: 48upx;border-radius: 24upx;" :src="item.techUserAvatar" mode=""></image>
					<view style="color: #202021;font-size: 30upx;margin-left: 16upx;">{{item.techUsername}} (接单方)</view>
				</view>
				<view style="color: #FF4E4C;font-size: 24upx;margin-right: 30upx;margin-top: 24upx;">
					待下单
				</view>
		
			</view>
			
			<view style="display: flex;flex-direction: row;margin-top: 24upx;margin-left: 24upx;margin-right: 24upx;" v-if="item.image !== null">
				<image style="width: 140upx;height: 140upx;border-radius: 16upx;" :src="item.image" mode="aspectFill"></image>
				<view style="display: flex;flex-direction: column;margin-left: 20upx;justify-content: space-between;width: 100%;">
					<view style="color: #191919;font-size: 28upx;">{{item.title}}</view>
					<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-top: 30upx;">
						<view style="color: #9E9E9E;font-size: 24upx;">
							{{item.orderTime}}
						</view>
						<view style="color: #191919;font-size: 32upx;font-weight: bold;">￥{{item.estimateAmount}}</view>
					</view>
				</view>
				
			</view>
			
			<view style="display: flex;flex-direction: row;margin-top: 24upx;margin-right: 24upx;" v-if="item.image === null">
				<!-- <image style="width: 140upx;height: 140upx;border-radius: 16upx;" :src="item.image" mode="aspectFill"></image> -->
				<view style="display: flex;flex-direction: column;margin-left: 80upx;justify-content: space-between;width: 100%;">
					<view style="color: #191919;font-size: 28upx;">{{item.title}}</view>
					<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-top: 30upx;">
						<view style="color: #9E9E9E;font-size: 24upx;">
							{{item.orderTime}}
						</view>
						<view style="color: #191919;font-size: 32upx;font-weight: bold;">￥{{item.estimateAmount}}</view>
					</view>
				</view>
				
			</view>
		</view>
		
		
		<view style="background: #FFFFFF;border-radius: 20upx;width: 702upx;height: 254upx;
		margin-top: 24upx;margin-left: 24upx;margin-right: 24upx;" v-for="(item,index) in demandOrderList" :key="index" v-if="code !==1">
			<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
				<view style="display: flex;flex-direction: row;align-items: center;margin-top: 24upx;margin-left: 24upx;">
					<image style="width: 48upx;height: 48upx;border-radius: 24upx;" :src="item.techUserAvatar" mode=""></image>
					<view style="color: #202021;font-size: 30upx;margin-left: 16upx;">{{item.techUsername}} (接单方)</view>
				</view>
				
				<view style="color: #FF4E4C;font-size: 24upx;margin-right: 30upx;margin-top: 24upx;">
					<text v-if="item.status===2">已完成</text>
					<text v-if="item.status===1">已下单</text>
				</view>

			</view>
			
			<view style="display: flex;flex-direction: row;margin-top: 24upx;margin-left: 24upx;margin-right: 24upx;" v-if="item.image !== null">
				<image style="width: 140upx;height: 140upx;border-radius: 16upx;" :src="item.image" mode="aspectFill"></image>
				<view style="display: flex;flex-direction: column;margin-left: 20upx;justify-content: space-between;width: 100%;">
					<view style="color: #191919;font-size: 28upx;">{{item.title}}</view>
					<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-top: 30upx;">
						<view style="color: #9E9E9E;font-size: 24upx;">
							{{item.orderTime}}
						</view>
						<view style="color: #191919;font-size: 32upx;font-weight: bold;">￥{{item.orderAmount}}</view>
					</view>
				</view>
				
			</view>
			
			<view style="display: flex;flex-direction: row;margin-top: 24upx;margin-right: 24upx;" v-if="item.image === null">
				<!-- <image style="width: 140upx;height: 140upx;border-radius: 16upx;" :src="item.image" mode="aspectFill"></image> -->
				<view style="display: flex;flex-direction: column;margin-left: 80upx;justify-content: space-between;width: 100%;">
					<view style="color: #191919;font-size: 28upx;">{{item.title}}</view>
					<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-top: 30upx;">
						<view style="color: #9E9E9E;font-size: 24upx;">
							{{item.orderTime}}
						</view>
						<view style="color: #191919;font-size: 32upx;font-weight: bold;">￥{{item.orderAmount}}</view>
					</view>
				</view>
				
			</view>
		</view>
		
		<view style="display: flex;flex-direction: column;align-items: center;" v-if="isShow">
			<image style="width: 350upx;height: 240upx;margin-top: 450upx;" src="../../static/images/order-default-no.png" mode=""></image>
			<view style="color: #B7B8BB;font-size: 28upx;margin-top: 20upx;">没有相关订单~</view>
		</view>
		
	</view>
</template>

<script>
	
	import{demand_order_page} from '../../api/mine/demand-order.js'
	export default {
		data() {
			return {
				code:1,
				demandOrderList:[],
				isShow:false
			}
		},
		onShow() {
			this.getDemandOrderList(1)
		},
		methods: {
			switchTab(value){
				this.code=value
				this.demandOrderList=[]
				this.getDemandOrderList(value)
			},
			getDemandOrderList(val){
				let params={}
				params.type=val
				this.isShow=false
				demand_order_page(params).then(res=>{
					console.log(res)
					if(res.status===200){
						if(res.data === null){
							this.isShow=true
							this.demandOrderList=[]
						}else{
							this.demandOrderList=res.data
							this.isShow=false
						}
						
					}
				})
			}
		}
	}
</script>

<style>

</style>
